<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>Edit an EPUB</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="../../stylesheet.css" type="text/css" rel="stylesheet"/>
<link href="../../page_styles1.css" type="text/css" rel="stylesheet"/>

  


<link href="../../calibreHtmlOutBasicCss.css" type="text/css" rel="stylesheet" />

</head>
<body>

<div class="calibreMeta">
  <div class="calibreMetaTitle">
  
  
    
    <h1>
      <a href="../../../index.html">Sigil User Guide
</a>
    </h1>
    
    
  
  </div>
  <div class="calibreMetaAuthor">
    0.7.2

  </div>
</div>

<div class="calibreMain">

  <div class="calibreEbookContent">
    
      <div class="calibreEbNavTop">
        
          <a href="tutorial_links.html" class="calibreAPrev">previous page</a>
        

        
          <a href="tutorial_spelling.html" class="calibreANext"> next page</a>
        
      </div>
    

    
  <h2 class="calibre5">A Quick Introduction To Code View</h2>

  <p class="calibre1">Until now you have probably been viewing your text exactly as ereaders would display your book – using the WYSIWYG Book View mode in Sigil.</p>

  <p class="calibre1">However, your text is not actually stored in an EPUB looking like it does in Book View. In fact, it is stored in HTML format – which is a mix of your text and HTML tags that tell ereaders how to interpret and display your book.</p>

  <p class="calibre1">You can see the HTML code in your files by using Code View.</p>

  <p class="calibre1">So why do you need to know anything about this? Because in order to use Find &amp; Replace, or to control the formatting of your book easily, or even to understand Spellcheck you need to be familiar with Code View.</p>

  <div class="tip">
    <p class="tiptext">It’s worth learning a little about Code View to help understand why your formatting looks the way it does. And it is really necessary if you want to use some of Sigil’s advanced features.</p>
  </div>

  <h3 class="sigilnotintoc">Code View</h3>

  <p class="calibre1">To switch to Code View, click the Code View button <img alt="view-code_22px" src="../Images/view-code_22px.png" class="calibre7"/>. You can switch back to Book View at any time by clicking the Book View button <img alt="view-book_22px" src="../Images/view-book_22px.png" class="calibre7"/>. Or you can double-click on the tab-header or use the shortcut for <span class="shortcut">View→Toggle View State</span>.</p>

  <p class="calibre1">This is Book View and Code View side by side for comparison:</p>

  <div class="image"><img alt="tutorial-bv-cv" src="../Images/tutorial-bv-cv.png" class="calibre7"/></div>

  <p class="calibre1">That’s quite a lot of text, but it’s not as jumbled as it appears. First, ignore everything at the top of the file up to and including the <span class="example">&lt;body&gt;</span> tag on line 11 in this example. The "header" is just information required by HTML files and not something you normally need to change.</p>

  <p class="calibre1">Your text starts after the <span class="example">&lt;body&gt;</span> tag:</p>

  <div class="image"><img alt="tutorial-cv" src="../Images/tutorial-cv.png" class="calibre7"/></div>

  <p class="calibre1">You can see all the same words that are shown in Book View – the chapter name "Introduction" and several paragraphs of text. But you can also see the HTML code tags that tell readers how to display that text.</p>

  <h3 class="sigilnotintoc">HTML Basics</h3>

  <p class="calibre1">A full description of HTML is beyond this tutorial, but understanding the basics will help you edit your text.</p>

  <p class="calibre1">If you look at the HTML version of your file in Code View you will see lots of words like <span class="example">&lt;p&gt;</span> or <span class="example">&lt;h1&gt;</span>, etc. These are the HTML tags that tell ereaders what to do with your text.</p>

  <p class="calibre1">For instance, the HTML code below tells the ereader that the text <span class="example">Chapter 8</span> is a level 1 Heading:</p>
  <pre class="example1">&lt;h1&gt;Chapter 8&lt;/h1&gt;</pre>

  <p class="calibre1">The <span class="example">&lt;h1&gt;</span> tag is the start of the text to be treated like a heading, and the <span class="example">&lt;/h1&gt;</span> tag indicates the end of the text included in the heading. This is what Sigil enters into your document when you click the <img alt="heading-1_22px" src="../Images/heading-1_22px.png" class="calibre7"/> button. Ereaders will typically make the text of a heading larger and center it on the screen.</p>

  <p class="calibre1">The HTML code below tells the ereader that the text <span class="example">This is a paragraph</span> is an ordinary paragraph. Since it’s a paragraph the ereader will apply a certain formatting, perhaps indenting the first line.</p>
  <pre class="example1">&lt;p&gt;This is a paragraph.&lt;/p&gt;</pre>

  <p class="calibre1">There are many more tags in HTML. The important point to remember is that the HTML tags tell ereaders how to format and display your content. They allow you to keep your content separate from your formatting which makes it easier to change how your book looks.</p>

  <p class="calibre1">HTML tags can get more fancy since they can include attributes that modify how they are interpreted. For example, here is a paragraph with some tags that define an ID used for linking as shown in the last chapter:</p>
  <pre class="example1">&lt;p&gt;&lt;span id="note1"&gt;This is a note&lt;/span&gt; for linking.&lt;/p&gt;</pre>

  <p class="calibre1">The span tag is used around small sections of text that need to be formatted differently or to contain information. In this case the information is that the words "This is a note" has an ID of "note1". The span tags with the ID attribute are the code that Sigil inserts when you use Insert ID.</p>

  <p class="calibre1">These are just a few examples of HTML code, but they give you an idea of what the majority of HTML is all about.</p>

  <p class="calibre1">What is important to remember is that in Code View you have access to both your text and the formatting codes that control the look of your book – so you can find and change them.</p>

  <div class="tip">
    <p class="tiptext">See the <a href="../Text/introduction.html">Introduction</a>, <a href="../Text/code_view.html">Code View</a> and <a href="../Text/tutorial_stylesheets.html">Stylesheets</a> chapters for more details.</p>
  </div>

  <h3 class="sigilnotintoc">Editing in Code View</h3>

  <p class="calibre1">Once you are in Code View you can edit your text just like in Book View. Try changing some of your words (but not the HTML tags just yet), and then switch back to Book View. You will see the updates you made. In fact, any changes you make in Book View or Code View will be visible in the other view as they both change the exact same file. It's just that Code View shows you the tags, and Book View uses them to format the text.</p>

  <div class="tip">
    <p class="tiptext">Unlike Book View, where you can make any changes you want without breaking your EPUB, when you are in Code View it is essential that you edit carefully. You will need to make sure all the tags you use are valid and are opened and closed properly – if they aren’t, you will get a warning when you try to save or switch to Book View and you will be unable to save your EPUB until they are fixed.</p>
  </div>

  <h3 class="sigilnotintoc">Preview</h3>

  <p class="calibre1">To really see changing the code in action, you can open the Preview window using View→Preview (you can always close it using View→Preview or its shortcut again). You may need to make the window bigger or drag it to another part of your desktop.</p>

  <p class="calibre1">Preview shows your text like Book View, but it stays open when you are in Code View. So once you open Preview, click on the Code View button <img alt="view-code_22px" src="../Images/view-code_22px.png" class="calibre7"/> to bring up Code View. You can type in Code View and Preview will update to show your changes after a second.</p>

  <div class="image"><img alt="tutorial-preview" src="../Images/tutorial-preview.png" class="calibre7"/></div>

  <div class="tip">
    <p class="tiptext">Save often to have your code checked for any errors to catch them early.</p>
  </div>



  </div>

  
  <div class="calibreToc">
    <h2><a href="../../../index.html"> Table of contents</a></h2>
     <div>
  <ul>
    <li>
      <a href="cover_picture.html">Cover</a>
    </li>
    <li>
      <a href="titlepage.html">Title Page</a>
    </li>
    <li>
      <a href="rights.html">Copyright</a>
    </li>
    <li>
      <a href="introduction.html">Introduction</a>
      <ul>
        <li>
          <a href="whats_new.html">What’s New</a>
        </li>
        <li>
          <a href="about_sigil.html">About Sigil</a>
        </li>
        <li>
          <a href="about_epub.html">About EPUB</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="installation.html">Installation</a>
    </li>
    <li>
      <a href="features.html">Features</a>
      <ul>
        <li>
          <a href="user_interface.html">User Interface</a>
        </li>
        <li>
          <a href="preferences.html">Preferences</a>
        </li>
        <li>
          <a href="opening_and_saving_files.html">Opening and Saving Files</a>
        </li>
        <li>
          <a href="book_view.html">Book View</a>
        </li>
        <li>
          <a href="code_view.html">Code View</a>
        </li>
        <li>
          <a href="preview.html">Preview</a>
        </li>
        <li>
          <a href="book_browser.html">Book Browser</a>
        </li>
        <li>
          <a href="metadata.html">Metadata</a>
        </li>
        <li>
          <a href="add_cover.html">Add Cover</a>
        </li>
        <li>
          <a href="table_of_contents.html">Table of Contents</a>
        </li>
        <li>
          <a href="validation.html">Validation</a>
        </li>
        <li>
          <a href="spellcheck.html">Spellcheck</a>
        </li>
        <li>
          <a href="media_files.html">Images, Video, Audio</a>
        </li>
        <li>
          <a href="special_characters.html">Special Characters</a>
        </li>
        <li>
          <a href="splitting_and_merging.html">Splitting and Merging</a>
        </li>
        <li>
          <a href="find_replace.html">Find &amp; Replace</a>
        </li>
        <li>
          <a href="saved_searches.html">Saved Searches</a>
        </li>
        <li>
          <a href="clips.html">Clips</a>
        </li>
        <li>
          <a href="clipboard_history.html">Clipboard History</a>
        </li>
        <li>
          <a href="links.html">Links and IDs</a>
        </li>
        <li>
          <a href="styles.html">Styles</a>
        </li>
        <li>
          <a href="indexes.html">Indexes</a>
        </li>
        <li>
          <a href="reports.html">Reports</a>
        </li>
        <li>
          <a href="external_editors.html">External Editors</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="tutorials.html">Tutorials</a>
      <ul>
        <li>
          <a href="tutorial_getting_started_with_epub.html">Getting Started With EPUB</a>
        </li>
        <li>
          <a href="tutorial_convert_to_html.html">Prepare Your File For Sigil</a>
        </li>
        <li>
          <a href="tutorial_load_file.html">Open Your File With Sigil</a>
        </li>
        <li>
          <a href="tutorial_save.html">Save Your EPUB File</a>
        </li>
        <li>
          <a href="tutorial_metadata.html">Add the Author and Title</a>
        </li>
        <li>
          <a href="tutorial_add_cover.html">Add a Cover Image</a>
        </li>
        <li>
          <a href="tutorial_split.html">Create Files For Each Chapter</a>
        </li>
        <li>
          <a href="tutorial_mark_chapters.html">Identify Your Chapters</a>
        </li>
        <li>
          <a href="tutorial_generate_toc.html">Generate A Table of Contents</a>
        </li>
        <li>
          <a href="tutorial_links.html">Create Links and Notes</a>
        </li>
        <li>
          <a href="tutorial_code_view.html">A Quick Introduction To Code View</a>
        </li>
        <li>
          <a href="tutorial_spelling.html">Check For Spelling Mistakes</a>
        </li>
        <li>
          <a href="tutorial_validate.html">Check For Errors In Your EPUB</a>
        </li>
        <li>
          <a href="tutorial_find_replace.html">Edit With Find &amp; Replace</a>
        </li>
        <li>
          <a href="tutorial_stylesheets.html">Use Stylesheets</a>
        </li>
        <li>
          <a href="tutorial_embed_fonts.html">Include Custom Fonts</a>
        </li>
        <li>
          <a href="tutorial_advanced_find.html">Advanced Find &amp; Replace – Regex</a>
        </li>
        <li>
          <a href="tutorial_regex_reference.html">Regular Expression Reference</a>
        </li>
        <li>
          <a href="tutorial_tips.html">Tips</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="faq.html">FAQ</a>
      <ul>
        <li>
          <a href="faq.html#faq_common_questions">Common Questions</a>
        </li>
        <li>
          <a href="faq.html#faq_questions">Where to Get Help</a>
        </li>
        <li>
          <a href="faq.html#faq_using_sigil">Using Sigil</a>
        </li>
        <li>
          <a href="faq.html#faq_formatting">Formatting and Styles</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="contributing_to_sigil.html">Contributing to Sigil</a>
    </li>
  </ul>
</div>


  </div>
  

  <div class="calibreEbNav">
    
      <a href="tutorial_links.html" class="calibreAPrev">previous page</a>
    

    <a href="../../../index.html" class="calibreAHome"> start</a>

    
      <a href="tutorial_spelling.html" class="calibreANext"> next page</a>
    
  </div>

</div>

</body>
</html>
